<template>
  <div class="page">
    <header>
      <span>推送报表</span>
      <img src="../../assets/img/ic_form_back@2x.svg" alt @click="goBack()" />
    </header>
    <div class="tip-box">
      <p>操作步骤：选择报表 / 添加推送人</p>
      <p>数据将根据您所选择的报表和推送人进行推送</p>
    </div>
    <div class="main-box">
      <div class="left-box">
        <h3>微信报表</h3>
        <div class="item-box">
          <div
            class="report-item"
            :class="{'active':report.id==chooseReportId}"
            v-for="report in weixinReports"
            @click="chooseReport(report)"
          >
            <img
              src="../../assets/img/ic_Subscribelist_form_mobile@2x.svg"
              alt
              v-show="!report.id==chooseReportId"
            />
            <img
              src="../../assets/img/ic_Subscribelist_form_financial Copy 2@2x.svg"
              alt
              v-show="report.id==chooseReportId"
            />
            <span>{{report.name}}</span>
          </div>
          <div class="report-item disabled" v-for="report in reportsDisabled">
            <img src="../../assets/img/ic_Subscribelist_form_mobile@2x.svg" alt />
            <span>{{report.name}}</span>
          </div>
        </div>
      </div>
      <div class="mid-box">
        <img src="../../assets/img/ic_default_arrow_grey@2x.svg" alt />
      </div>
      <div class="middle-box">
        <h3>绑定推送人</h3>
        <div class="item-box">
          <div class="item-row" v-for="item in userList">
            <el-checkbox-group v-model="chooseUserIdList">
              <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
            <span @click="getParkLotListForUser(item)">
              <img src="../../assets/img/ic_parkinglot.svg" alt />
            </span>
          </div>
        </div>
        <div class="add-user-btn-box" @click="generateQr()">
          <img src="../../assets/img/ic_subscribe_add@2x.svg" alt />
          <span>添加推送人</span>
        </div>
        <div class="save-btn-box">
          <el-button type="primary" @click="save()">保 存</el-button>
        </div>
      </div>
      <div class="mid-box">
        <img src="../../assets/img/ic_default_arrow_grey@2x.svg" alt />
      </div>
      <div class="right-box">
        <h3>
          绑定停车场
          <span v-show="selectedUser.name">{{selectedUser.name}}(绑定人)</span>
        </h3>
        <div class="item-box">
          <el-checkbox-group
            v-for="item in parkLotList"
            v-model="chooseParkLotList"
            v-show="selectedUser.name"
          >
            <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <basic-modal ref="qrModal" width="450" static="true">
      <h3 slot="title">添加推送人员</h3>
      <div class="modal-body" slot="modal-body">
        <div class="QrBox">
          <img :src="qrImg" alt />
        </div>
        <div class="spanBlue">
          <p>1.请先关注一点停微信公众号</p>
          <p>2.使用微信扫码进行绑定</p>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitBind()">确 定</button>
        <button class="ake_btn ake_btn_text modal-close" @click="cancelBind()">取 消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import invokeModal from "@mixins/modal/invokeModal.js";
import { deepCopyObjArray } from "../../assets/js/help.js";
export default {
  mixins: [common, invokeModal],
  data() {
    return {
      selectedUser: {
        name: "",
        id: ""
      },
      qrImg: "",
      reports: [],
      reportsDisabled: [],
      userList: [],
      weixinReports: [],
      parkLotList: [],
      chooseReportId: "",
      chooseUserIdList: [], //选择的用户id列表
      chooseParkLotList: [] //选择的停车场id列表
    };
  },
  created() {
    this.getData();
    this.getAllParkLot();
  },
  methods: {
    getAllParkLot() {
      //获取所有停车场
      API.fetchGet("/commonFun/queryAllPark.do").then(res => {
        if (res.status == 1) {
          let parkList = res.data.parkList;
          for (let i = 0; i < parkList.length; i++) {
            let itemObj = parkList[i];
            let obj = {};
            obj.id = itemObj.pkGlobalid;
            obj.name = itemObj.name;
            this.parkLotList.push(obj);
          }
        }
      });
    },
    getParkLotListForUser(item) {
      //获取绑定人关联的停车场列表
      if (this.chooseReportId == null || this.chooseReportId == "") {
        this.showToast("请先选择一个报表", 0);
        return;
      }
      this.selectedUser.name = item.name;
      this.selectedUser.id = item.id;
      let params = {
        userId: item.id,
        reportId: this.chooseReportId
      };
      API.fetchGet("/report/dataPush/userReportParksList.do", params).then(
        res => {
          let selectedParkLot = res.data ? res.data : [];
          if (!selectedParkLot.length) {
            for (let i = 0; i < this.parkLotList.length; i++) {
              this.chooseParkLotList.push(this.parkLotList[i].id);
            }
          } else {
            this.chooseParkLotList = deepCopyObjArray(selectedParkLot);
          }
        }
      );
    },
    submitBind() {
      //绑定报表推送人-确定
      this.getUserReports();
      this.closed("qrModal", 1);
      this.showToast("绑定成功", 1);
    },
    cancelBind() {
      //绑定报表推送人-取消
      this.getUserReports();
      this.closed("qrModal", 1);
    },
    generateQr() {
      this.toOpenModal("qrModal");
      let uri =
        window.location.protocol +
        "//" +
        window.location.host +
        "/mgr/report/dataPush/generateQr.do" +
        "?" +
        new Date().getTime();

      this.qrImg = uri; //'http://127.0.0.1:5002/mgr/report/dataPush/generateQr.do';
    },
    save() {
      let self = this;
      let params = {};
      let userParkMap = [
        {
          userId: self.selectedUser.id,
          parkList: self.chooseParkLotList
        }
      ];
      params.reportId = self.chooseReportId;
      params.userIds = JSON.stringify(self.chooseUserIdList);
      params.userParkMapStr = JSON.stringify(userParkMap);
      if (self.chooseReportId == null || self.chooseReportId == "") {
        self.showToast("请先选择一个报表", 0, 1500);
        return;
      }
      if (
        self.selectedUser.id &&
        self.chooseUserIdList.indexOf(self.selectedUser.id) == -1
      ) {
        self.showToast("请先勾选要绑定停车场的人", 0, 2000);
        return;
      }
      if (self.selectedUser.id && !self.chooseParkLotList.length) {
        self.showToast("请选择要绑定的停车场", 0, 1500);
        return;
      }
      API.fetchPost("/report/dataPush/bindBatch.do", params).then(
        res => {
          if (res.status == 1) {
            self.getUserReports();
            self.showToast("操作成功", 1);
          }
        },
        err => {}
      );
    },
    //返回
    goBack() {
      this.$router.push({ path: "/report/data_push" });
    },
    chooseReport(report) {
      this.chooseReportId = report.id;
      this.chooseUserIdList = report.userList;
      this.selectedUser.name = "";
      this.selectedUser.id = "";
      this.chooseParkLotList = [];
    },
    //初始化获取数据
    getData() {
      this.getReportList();
    },
    //得到报表条目
    getReportList() {
      this.reports = [];
      this.reportsDisabled = [];
      let self = this;
      let params = {};
      API.fetchGet("/report/dataPush/reportList.do", params).then(
        res => {
          let data = res.data,
            list = data.rows;
          for (let i = 0; i < list.length; i++) {
            let obj = {};
            obj.id = list[i].id;
            obj.name = list[i].name;
            obj.actived = list[i].actived;
            if (list[i].actived == 1) {
              self.reports.push(obj);
            } else {
              self.reportsDisabled.push(obj);
            }
          }
          self.getUserReports();
        },
        err => {}
      );
    },
    getUserReports() {
      let self = this;
      this.userList = [];
      this.weixinReports = [];
      let params = {};
      API.fetchGet("/report/dataPush/userReportList.do", params).then(
        res => {
          let data = res.data,
            list = data.rows;
          for (let i = 0; i < list.length; i++) {
            self.userList.push({ id: list[i].id, name: list[i].weixinId });
          }
          for (let i = 0; i < self.reports.length; i++) {
            let obj = self.reports[i];
            let tempObj = {};
            tempObj.id = obj.id;
            tempObj.name = obj.name;
            tempObj.userList = [];
            for (let j = 0; j < list.length; j++) {
              let objArr = list[j].dataPushReportsList;
              for (let k = 0; k < objArr.length; k++) {
                if (obj.id == objArr[k].id) {
                  tempObj.userList.push(list[j].id);
                }
              }
            }
            self.weixinReports.push(tempObj);
          }
        },
        err => {}
      );
    }
  }
};
</script>

<style lang="less" scoped>
.QrBox {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.spanBlue {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #5588dd;
  margin-left: 6px;
  p {
    width: 46%;
    text-align: left;
  }
}
.save-btn-box {
  margin-top: 20px;
  margin-bottom: 30px;
  text-align: center;
}
.add-user-btn-box {
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
  img {
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
  }
  span {
    color: #5995d8;
  }
}
.page {
  padding-left: 20px;
  background-color: #ffffff;
  width: 960px;
  margin: 0 auto;
  padding-bottom: 50px;
}
header {
  height: 50px;
  line-height: 50px;
  span {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
  }
  img {
    width: 34px;
    height: 34px;
    position: relative;
    bottom: 4px;
    margin-left: 11px;
    cursor: pointer;
  }
}
.tip-box {
  padding-top: 10px;
  padding-bottom: 8px;
  margin-bottom: 23px;
  p {
    font-size: 14px;
    color: #666666;
    &:first-child {
      margin-bottom: 20px;
    }
  }
}
.main-box {
  // border: 1px solid red;
  display: flex;
  .mid-box {
    width: 80px;
    text-align: center;
    padding-top: 15px;
    img {
      width: 18px;
      height: 30px;
    }
  }
  .left-box,
  .right-box,
  .middle-box {
    width: 250px;
    height: 500px;
    background: #ffffff;
    border: 1px solid #d7dce2;
    display: flex;
    flex-direction: column;
    h3 {
      height: 50px;
      line-height: 50px;
      background: #efefef;
      padding-left: 20px;
    }
    .item-box {
      flex: 1;
      padding: 20px 20px 0 20px;
      // height: 180px;
      overflow-y: scroll;
      .report-item {
        position: relative;
        padding-left: 35px;
        cursor: pointer;
        &.active {
          background: #5995d8;
          span {
            color: #ffffff;
          }
        }
        &.disabled {
          pointer-events: none;
          span {
            color: #bec6ce;
          }
        }
        img {
          position: absolute;
          top: 50%;
          left: 6px;
          transform: translateY(-50%);
        }
        span {
          font-size: 14px;
          color: #444444;
        }
      }
      .person-item {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
      }
      .report-item,
      .person-item {
        width: 196px;
        height: 40px;
        line-height: 40px;
        background: #f6f6f6;
        border: 1px solid #ebebeb;
        border-radius: 4px;
        margin-bottom: 10px;
      }
    }
  }
}
.el-checkbox-group {
  display: flex;
  flex-direction: column;
  label {
    // border: 1px solid red;
    margin-left: inherit;
    padding-left: 20px;
    width: 186px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    background: #f6f6f6;
    border: 1px solid #ebebeb;
    border-radius: 4px;
  }
}
.middle-box {
  .item-row {
    display: flex;
    > span {
      line-height: 40px;
      margin-left: 5px;
      cursor: pointer;
      color: #5995d8;
    }
  }
  .el-checkbox-group {
    label {
      width: 170px;
    }
  }
}
.right-box {
  > h3 {
    > span {
      margin-left: 10px;
      font-size: 12px;
      font-weight: normal;
    }
  }
}
</style>
